<template>
    
       
  <div class="paginationbox">

    <span class="num">共400条记录 1/8页</span>
    <a-table
  	ref="table"
  	rowKey=id
   :columns="columns"
   :dataSource="lists"
   :pagination="pagination"
   @change="tableChange"
 >
 </a-table>
     <a-pagination
      class="pagination" 
      :pagination="pagination" 
      :show-total="total => `一共 ${total} 条`"
       showSizeChanger 
    showQuickJumper 
    
    show-quick-jumper 
    :default-current="current"
     :total="400"
     @change="onChange" />
  </div>


</template>

<script>
import {Workbench}from '@/config/api'
export default {
    name: 'SmartCommunityZonelist',

    data() {
        return {
            lists:[],
        pageSize: 20,
         current: '',
            columns: [
        {
          title: "活动标题",
          
          dataIndex: "id"  
        },  
   ],
            pagination: {
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
//   showTotal: total => `共 ${total} 条数据`, 
//showTotal:total => `共400 条数据`,
  showSizeChanger: true, // 可以改变每页个数
  pageSizeOptions: ["10", "20", "30", "40"],
  onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
}
     
}
    },

    mounted() {
        
    },

    methods: {
        onChange(){
        
        const { current, pageSize } = e;
        this.pagination.current = current;
        this.pagination.pageSize = pageSize;
    
        //发送请求 获取数据 ， 将获取到的数据 赋值给表格
    
        this.lists = Workbench(); 
   
        console.log(this.lists)
    },
    
        tableChange(e){
	 console.log(e)  
}
  },
};
</script>

<style lang="less" scoped>
.head{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    font-weight: 500;
    margin: 20px 20px;
    display: block;
}

.pushbutton{
    margin-left: 950px;
    margin-top: -36px;
    display: flex;
}
.pushbutton button{
    margin: 0 5px;
    
}
.pagination{
    margin-left: 450px;
}
.num{
    width: 162px;
    height: 22px;
    font-size: 14px;
    line-height: 80px;
    display: block;
    margin-left: 20px;
}
.aginationbox{
    width: 100%;
}
</style>